/** Styles for the Administration UI change forms. */

@import (reference) "lib/css/fontawesome.less";

@import (reference) "rb/css/ui/buttons.less";
@import (reference) "rb/css/ui/colors.less";
@import (reference) "rb/css/ui/content-header.less";
@import (reference) "rb/css/ui/forms.less";


#rb-ns-admin() {
  .form-inline() {
    @_color-vars: #rb-ns-ui.colors();
    @_form-vars: #rb-ns-ui.form();

    @delete-icon-color: @_color-vars[@red-10];

    @spacing: @_form-vars[@standard-spacing];
    @title-border-color: #rb-ns-ui.form-fieldset[@separator-border-color];
    @title-margin: @_form-vars[@standard-spacing];
    @title-padding: @_form-vars[@small-spacing];
  }

  .form-inline-group() {
    @_color-vars: #rb-ns-ui.colors();
    @_form-vars: #rb-ns-ui.form();

    @add-icon: @fa-var-plus;
    @add-icon-color: @_color-vars[@green-10];
    @add-icon-size: 140%;

    @title-border-color: #rb-ns-ui.form-fieldset[@separator-border-color];
    @title-bg: @_color-vars[@yellow-80];
    @title-padding: @_form-vars[@standard-spacing];
  }
}


/**
 * A group of inline objects shown in a change page.
 *
 * Each inline is an object related to the main object being modified on
 * the change page, and can be saved along with that main object.
 *
 * Structure:
 *     <div class="rb-c-admin-form-inline-group">
 *      <h2 class="rb-c-admin-form-inline-group__title">...</h2>
 *      <div class="rb-c-admin-form-inline-group__inlines">
 *       ...
 *      </div>
 *      <div class="rb-c-admin-form-inline-group__add-action">...</div>
 *     </div>
 */
.rb-c-admin-form-inline-group {
  @_inline-group-vars: #rb-ns-admin.form-inline-group();
  @_form-vars: #rb-ns-ui.form();
  @_spacing: @_form-vars[@standard-spacing];
  @_large-spacing: @_form-vars[@large-spacing];

  margin: @_large-spacing 0 0 0;

  &__add-action {
    display: inline-block;
    padding: @_spacing;

    &:before {
      .fa-icon();
      color: @_inline-group-vars[@add-icon-color];
      content: @_inline-group-vars[@add-icon];
      font-size: @_inline-group-vars[@add-icon-size];
      vertical-align: text-top;
    }
  }

  /**
   * A list of inline objects.
   *
   * Structure:
   *     <div class="rb-c-admin-form-inline-group__inlines">
   *      <div class="rb-c-admin-form-inline">...</div>
   *      ...
   *     </div>
   */
  &__inlines {
  }

  /**
   * The title of a group of inlines.
   *
   * Structure:
   *     <h2 class="rb-c-admin-form-inline-group__title">...</h2>
   */
  &__title {
    @_border-color: @_inline-group-vars[@title-border-color];

    background: @_inline-group-vars[@title-bg];
    border-top: 1px @_border-color solid;
    border-bottom: 1px @_border-color solid;
    margin: 0;
    padding: @_inline-group-vars[@title-padding];
    #rb-ns-ui.content-header.add-title-styles();
  }
}


/**
 * An inline object shown in a change page.
 *
 * An inline object is related to the main object being modified on the
 * change page, and can be saved along with that main object.
 *
 * Modifiers:
 *     -is-template:
 *         This inline is a template for new entries. It will be removed from
 *         the DOM when the JavaScript classes render the inline group, but
 *         will be hidden until then.
 *
 * Structure:
 *     <div class="rb-c-admin-form-inline">
 *      <h3 class="rb-c-admin-form-inline__title">...</h3>
 *      <fieldset>...</fieldset>
 *      ...
 *     </div>
 */
.rb-c-admin-form-inline {
  @_inline-vars: #rb-ns-admin.form-inline();
  @_spacing: @_inline-vars[@spacing];

  margin: 0;
  overflow: hidden;
  position: relative;

  &.-is-template {
    display: none;
  }

  /**
   * An action that deletes the inline.
   *
   * Structure:
   *     <span class="rb-c-admin-form-inline__delete-action">...</span>
   */
  &__delete-action {
    color: @_inline-vars[@delete-icon-color];
    cursor: pointer;
  }

  /**
   * Actions that can be performed on the inline.
   *
   * This houses the Delete action.
   *
   * Structure:
   *     <div class="rb-c-admin-form-inline__actions">
   *      <div class="rb-c-admin-form-inline__action">...</div>
   *      ...
   *     </div>
   */
  &__actions {
    float: right;
  }

  /**
   * The title for an inline.
   *
   * This will contain a string representation of an inline object and may
   * also contain zero or more actions.
   *
   * Structure:
   *     <h3 class="rb-c-admin-form-inline__title">
   *      <span class="rb-c-admin-form-inline__title-prefix">...</span>
   *      <span class="rb-c-admin-form-inline__title-object">...</span>
   *      <span class="rb-c-admin-form-inline__title-index">...</span>
   *      <span class="rb-c-admin-form-inline__actions">...</span>
   *     </h3>
   */
  &__title {
    border-bottom: 1px @_inline-vars[@title-border-color] solid;
    margin: @_inline-vars[@title-margin] 0;
    padding: @_inline-vars[@title-padding];
    #rb-ns-ui.content-header.add-title-styles();
  }

  /**
   * The index of the inline.
   *
   * This will be replaced when inlines are added or removed.
   *
   * Structure:
   *     <span class="rb-c-admin-form-inline__title-index">#...</span>
   */
  &__title-index {
  }

  /**
   * The title of the inline object.
   *
   * This is generally a string representation of the object.
   *
   * Structure:
   *     <span class="rb-c-admin-form-inline__title-object">...</span>
   */
  &__title-object {
    text-transform: none;
  }

  /**
   * The prefix for a title of the inline object.
   *
   * This is generally a string representation of the type of object, followed
   * by a colon and space.
   *
   * Structure:
   *     <span class="rb-c-admin-form-inline__title-object">...: </span>
   */
  &__title-prefix {
  }
}


/*
 * Django widgets.
 *
 * These provide styling overrides for some Django widgets, ensuring that
 * they look correct when shown in the administration UI.
 */
.rb-c-form-field__input {
  @_form-vars: #rb-ns-ui.form();
  @_small-spacing: @_form-vars[@small-spacing];
  @_standard-spacing: @_form-vars[@standard-spacing];

  /**
   * Django split date/time input.
   *
   * Structure:
   *     <p class="datetime">
   *      <input class="vDateField" type="text" ...>
   *      <input class="vTimeField" type="text" ...>
   *     </p>
   */
  .datetime {
    @_form-vars: #rb-ns-ui.form();

    margin: 0;
    padding: 0;

    .vDateField,
    .vTimeField {
      width: 8em;
    }

    .vDateField {
      margin-bottom: @_small-spacing;
    }
  }

  /**
   * Django clearable file upload widget.
   *
   * This is defined in Django's ``admin/widgets/clearable_file_input.html``
   * template.
   *
   * Structure:
   *     <p class="file-upload">
   *      text...
   *      <a href="...">...</a>
   *      <span class="clearable-file-input">
   *       <input type="checkbox" name="..." id="...">
   *       <label for="...">...</label>
   *      </span>
   *      <br>
   *      text...
   *      <input ...>
   *     </p>
   */
  .file-upload {
    margin: 0;
    padding: 0;

    input[type="file"] {
      margin-top: @_small-spacing;
    }

    .clearable-file-input {
      margin-left: @_standard-spacing;
    }
  }

  /**
   * Django raw ID related lookup input.
   *
   * This is defined in Django's ``admin/widgets/foreign_key_raw_id.html``
   * template.
   *
   * Structure:
   *     <a class="related-lookup" href="..."></a>
   */
  .related-lookup {
    margin-right: @_standard-spacing;

    &:before {
      .fa-icon();
      color: black;
      content: @fa-var-search;
      font-size: 140%;
    }
  }

  /**
   * Django related object drop-down.
   *
   * This is defined in Django's ``admin/widgets/related_widget_wrapper.html``
   * template.
   *
   * Structure:
   *     <div class="related-widget-wrapper">...</div>
   */
  .related-widget-wrapper {
    float: none;
  }

  /**
   * Django side-by-side selector widget.
   *
   * Structure:
   *     <div class="selector">
   *      <div class="selector-available">
   *       <h2>
   *        text...
   *        <span class="help help-tooltip help-icon" ...></span>
   *       </h2>
   *       <p id="..." class="selector-filter">
   *        <label for="...">
   *         <span class="help-tooltip search-label-icon"></span>
   *        </label>
   *       </p>
   *       <select class="filtered" ...>
   *        <option ...>...</option>
   *        ...
   *       </select>
   *       <a class="selector-chooseall active" ...>...</a>
   *      </div>
   *      <ul class="selector-chooser">
   *       <li><a href="#" class="selector-add">...</a></li>
   *       <li><a href="#" class="selector-remove">...</a></li>
   *      </ul>
   *      <div class="selector-chosen">
   *       <h2>
   *        text...
   *        <span class="help help-tooltip help-icon" ...></span>
   *       </h2>
   *       <select class="filtered" ...>
   *        <option ...>...</option>
   *        ...
   *       </select>
   *       <a class="selector-clearall active" ...>...</a>
   *      </div>
   *     </div>
   */
  .selector {
    select {
      /*
       * Remove the weird padding around the <select>, and add padding instead
       * to the options within it.
       */
      padding: 0;

      option {
        padding: 5px 10px;
      }
    }

    .selector-available h2,
    .selector-chosen h2 {
      /*
       * Make the font size consistent with the rest of the form, but give the
       * headers a bit of padding.
       */
      font-size: inherit;
      margin-bottom: 0;
      padding: 0.4em;

      .help {
        color: inherit;
      }

      .help-icon {
        /* Remove their help icon in favor of our own in the main .help rule. */
        background: none;
      }
    }

    .selector-available {
      select {
        /*
         * Try to align this with the chosen selector. This is a specific
         * number, but so is the original in Django. Ours is just better tuned
         * to our sizes.
         */
        height: 200px;
      }
    }

    .selector-chosen {
      h2 {
        background: #rb-ns-ui.colors[@blue-70];
        color: black;
      }

      select {
        /*
         * Try to align this with the available selector. This is a specific
         * number, but so is the original in Django. Ours is just better tuned
         * to our sizes.
         */
        height: 238px;
      }
    }

    .selector-filter label {
      /*
       * Fix alignment of the magnifying glass icon so that it's better
       * aligned with the (slightly larger than default) filter text box.
       */
      margin-top: 3px;
    }
  }
}
